<template>
	<view class="page">
		<u-navbar title="用户" border @leftClick="$utils.back()" placeholder />
		<view class="tabBox">
			<view style="font-size: 40rpx;" @click='searchShow=true' class="icon-shaixuan iconfont" />
		</view>
		<view class="body">
			<z-paging ref="paging" style="height: 100%;" :fixed="false" v-model="data" @query="query"
				:default-page-no="1" :default-page-size="20">
				<template v-if="loading">
					<view v-for="item in 15" :key="item" class="userBox">
						<view style="width: 100rpx;height: 100rpx;border-radius: 8rpx;margin-right: 10rpx;"
							class="Skeleton" />
						<view>
							<view style="height: 30rpx;width: 100%;" class="Skeleton" />
							<view style="height: 30rpx;width: 100%;" class="Skeleton" />
						</view>
					</view>
				</template>
				<template v-else>
					<view v-for="item in data" :key="item.id" class="userBox">
						<image :src="item.avatar" mode="aspectFill" />
						<view>
							<view>
								<u-text :lines='1' :text='item.nick_name' />
							</view>
							<view>
								<u-text :lines='1' :text='`uuid:${item.uuid}`' />
							</view>
						</view>
					</view>
				</template>
			</z-paging>
		</view>
		<view>
			<u-popup :show="searchShow" @close="searchShow=false" :round="10">
				<view class="popupTitle">
					<u-icon size="20" name="close" @click="searchShow=false"></u-icon>
					<text>条件查询</text>
					<text @click="$refs.paging.reload();searchShow=false">查询</text>
				</view>
				<view>
					<view class="searchBox ">
						<view>
							关键字搜索：
						</view>
						<u-search @search="$refs.paging.reload();searchShow=false" borderColor='#bbb' bgColor='#fff'
							placeholder="请输入关键字" v-model="keywords" clearabled :showAction='false'></u-search>

					</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchShow: false,
				keywords: '',
				data: [],
				loading: true,
			}
		},
		methods: {

			query(page, size) {
				let obj = {
					page,
					size
				}
				if (this.keywords) {
					obj.keywords = this.keywords
				}
				uni.showLoading({
					title: '加载中...'
				})
				this.$api.Shop.Member(obj).then(res => {
					uni.hideLoading()
					this.$refs.paging.complete(res.data.members.data)
					this.loading = false
				}).catch(err => {
					uni.hideLoading()
					uni.$u.toast(err.data.message)
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		padding: 20rpx 20rpx 0;
		height: 100vh;
		padding-bottom: calc(constant(safe-area-inset-bottom) + 10rpx);
		/* 兼容 iOS 设备 */
		padding-bottom: calc(env(safe-area-inset-bottom) + 10rpx);
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
	}

	.body {
		flex: 1;
		overflow: hidden;
	}

	.userBox {
		display: flex;
		align-items: center;
		margin-top: 20rpx;

		image {
			width: 100rpx;
			height: 100rpx;
			border-radius: 8rpx;
			margin-right: 10rpx;
		}

		>view:nth-child(2) {
			flex: 1;
			display: flex;
			height: 100rpx;
			flex-direction: column;
			justify-content: space-between;
			box-sizing: border-box;
			padding-bottom: 10rpx;
			border-bottom: 1rpx solid #f5f5f5;
		}
	}

	.tabBox {
		display: flex;
		justify-content: flex-end;
	}
	.searchBox {
		padding: 40rpx;
	
		>view {
			margin: 20rpx 0;
		}
	}
</style>